<template>
  <div class="new-box">
    <div class="menu">
      <!-- <router-link tag="div" to="/one">one</router-link>
      <router-link tag="div" to="/two">two</router-link>
      <router-link tag="div" to="/three">three</router-link> -->

      <!-- 
      跳转得相对路径，删除当前末尾得路径，增加新得相对路径
        正在访问得路径  /a/b/c
        以相对路径方式跳转到  d
        1.删除末尾路径c
        2.增加路径d
        => /a/b/d
      -->
      <!-- 不建议写相对路径模式，因为跳转不稳定 -->
      <!-- <router-link tag="div" to="one">one</router-link> -->

      <!-- to 取值字符串，需要提供路由得路径 -->
      <router-link tag="div" to="/new/one">one</router-link>
      <router-link tag="div" to="/new/two">two</router-link>
      <router-link tag="div" to="/new/three">three</router-link>
      <hr />
      <!-- v-bind:to 取值对象，使用对象配置完成路由组件得跳转定义 -->
      <!-- a. 路径导航 -->
      <router-link tag="div" :to="{ path: '/new/one' }">one</router-link>
      <!-- b. 具名导航 -->
      <router-link tag="div" :to="{ name: 'newTwo' }">two</router-link>
      <router-link tag="div" :to="{ name: 'newThree' }">three</router-link>
    </div>
    <div class="body">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.new-box {
  flex-grow: 1;

  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  // height: 100%;
  .menu {
    width: 200px;
    background-color: #dedede;
  }
}
.router-link-exact-active,
.router-link-active {
  color: brown;
}
</style>
